﻿@{
    ViewBag.Title = "Home Page";
}
@section css {
    <link href="~/Scripts/Bootstrap-Table-1.5.0/bootstrap-table.min.css" rel="stylesheet" />
    <style type="text/css">

    </style>
}
<div class="row">
    <div class="col-md-12">
        <h2>ASP.NET MVC and Bootstrap Table Integration</h2>
        <table id="table-javascript"></table>
    </div>
</div>
@section Scripts {
    <script src="~/Scripts/Bootstrap-Table-1.5.0/bootstrap-table.min.js"></script>
    <script src="~/Scripts/Bootstrap-Table-1.5.0/locale/bootstrap-table-en-US.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#table-javascript').bootstrapTable({
                    method: 'get',
                    url: '/Home/GetData',
                    cache: false,
                    height: 400,
                    striped: true,
                    pagination: true,
                    pageSize: 50,
                    pageList: [10, 25, 50, 100, 200],
                    search: true,
                    showColumns: true,
                    showRefresh: true,
                    minimumCountColumns: 2,
                    clickToSelect: true,
                    columns: [{
                        field: 'state',
                        checkbox: true
                    }, {
                        field: 'ID',
                        title: 'Item ID',
                        align: 'right',
                        valign: 'bottom',
                        sortable: true
                    }, {
                        field: 'Name',
                        title: 'Item Name',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    }, {
                        field: 'Price',
                        title: 'Item Price',
                        align: 'left',
                        valign: 'top',
                        sortable: true
                    }, {
                        field: 'operate',
                        title: 'Item Operate',
                        align: 'center',
                        valign: 'middle',
                        clickToSelect: false,
                        formatter: operateFormatter,
                        events: operateEvents
                    }]
                });

        });

        function operateFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" title="Like">',
                    '<i class="glyphicon glyphicon-heart"></i>',
                '</a>',
                ' <a class="edit ml10" href="javascript:void(0)" title="Edit">',
                    '<i class="glyphicon glyphicon-edit"></i>',
                '</a>',
                ' <a class="remove ml10" href="javascript:void(0)" title="Remove">',
                    '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .like': function (e, value, row, index) {
                alert('You click like icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .edit': function (e, value, row, index) {
                alert('You click edit icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .remove': function (e, value, row, index) {
                alert('You click remove icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            }
        };

    </script>
}